<template>
    <el-container class="main-container">
        <!-- 头部区域 -->
        <el-header>
            <!-- 左侧的 logo -->
            <img src="../../assets/images/logo.png" alt="" />
            <!-- 右侧的菜单 -->
            <el-menu class="el-menu-top" mode="horizontal" background-color="#23262E" text-color="#fff"
                active-text-color="#409EFF">
                <el-submenu index="1">
                    <template slot="title">
                        <!-- 头像 -->
                        <!-- <img src="../../assets/logo.png" alt="" class="avatar" /> -->
                        <img v-if="userInfo.user_pic" :src="userInfo.user_pic" alt="" class="avatar" />
                        <img v-else src="../../assets/logo.png" alt="" class="avatar" />
                        <span>个人中心</span>
                    </template>
                    <el-menu-item index="1-1"><i class="el-icon-s-operation"></i>基本资料</el-menu-item>
                    <el-menu-item index="1-2"><i class="el-icon-camera"></i>更换头像</el-menu-item>
                    <el-menu-item index="1-3"><i class="el-icon-key"></i>重置密码</el-menu-item>
                </el-submenu>
                <el-menu-item @click="logout" index="2"><i class="el-icon-switch-button"></i>退出</el-menu-item>
            </el-menu>
        </el-header>
        <el-container>
            <!-- 左侧边栏区域 -->
            <el-aside width="200px">
                <div class="user-box">
                    <!-- webpack 注意事项 处理图片 -->
                    <!-- 如果src是变量，就不进行打包，写死了会打包 -->
                    <!-- <img :src="userInfo.user_pic || '../../assets/logo.png'" alt="" /> -->
                    <img v-if="userInfo.user_pic" :src="userInfo.user_pic" alt="" />
                    <img v-else src="../../assets/logo.png" alt="" />
                    <span>欢迎 {{ userInfo.nickname || userInfo.username }}</span>
                </div>
                <!-- 侧边菜单 -->
                <el-menu default-active="home" class="el-menu-vertical-demo" background-color="#23262E"
                    text-color="#fff" active-text-color="#409EFF">
                    <!-- <el-menu-item :index="$route.path" @click="Home"> -->


                    <!-- <template v-for="item in menus">
                        <el-menu-item :key="item.indexPath" v-if="!item.children"  index="home">
                            <i :class="item.icon"></i>
                            <span slot="title">{{ item.title }}</span>
                        </el-menu-item>
                        <el-submenu v-else :key="item.indexPath + 1" index="1">
                            <template #title>
                                <i :class="item.icon"></i>
                                <span slot="title">{{ item.title }}</span>
                            </template>
                            <el-menu-item v-for="child in item.children" :key="children.indexPath">
                                <i class="el-icon-office-building"></i>
                               {{childtitle}}
                            </el-menu-item>

                        </el-submenu>
                    </template> -->

                    <template v-for="item in menus">
                        <!-- 不包含子菜单的“一级菜单” -->
                        <el-menu-item :index="item.indexPath" :key="item.indexPath" v-if="!item.children">
                            <i :class="item.icon"></i>{{ item.title }}
                        </el-menu-item>
                        <!-- 包含子菜单的“一级菜单” -->
                        <el-submenu :index="item.indexPath" :key="item.indexPath + 1" v-else>
                            <template slot="title">
                                <i :class="item.icon"></i>
                                <span>{{ item.title }}</span>
                            </template>
                            <!-- 循环渲染“二级菜单” -->
                            <el-menu-item :index="subItem.indexPath" v-for="subItem in item.children"
                                :key="subItem.indexPath">
                                <i :class="subItem.icon"></i>{{ subItem.title }}
                            </el-menu-item>
                        </el-submenu>
                    </template>
                    
                </el-menu>
            </el-aside>
            <el-container>
                <!-- 页面主体区域 -->
                <el-main>
                    <router-view></router-view>
                </el-main>
                <!-- 底部 footer 区域 -->
                <el-footer>© www.itheima.com - 黑马程序员</el-footer>
            </el-container>
        </el-container>
    </el-container>
</template>

<script>
import { mapState } from 'vuex';

export default {
    name: 'Main',
    data() {
        return {
            menus: [],
        }
    },
    async created() {
        // console.log(this.$route.path);

        // 发送 ajax 请求 获取菜单列表
        const { data: res } = await this.$http.get('/my/menus', {
            headers: {
                Authorization: this.token,
            },
        })
        // console.log(res);

        if (res.code !== 0) return
        this.menus = res.data
        console.log(this.menus);

        // if (res.code !== 0) {
        //     this.menus = res.data
        // }

        // 调用 actions 的函数发送请求
        this.$store.dispatch('user/getUserInfo')
    },
    computed: {
        ...mapState('user', ['userInfo'], 'token')
    },
    methods: {
        // // 个人资料
        // UserInfo() {
        //     this.$router.push('/user-info')
        // },
        // // 更换头像
        // Avatar() {
        //     this.$router.push('/user-avatar')
        // },
        // // 首页
        // Home() {
        //     this.$router.push('/home')
        // },
        // 退出
        logout() {
            this.$confirm('确认退出吗？', '确认退出？', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '退出登录!'
                });
                //  退出成功 清空 token
                this.$store.commit('user/updateToken', '')
                // 跳转登录页面
                this.$router.push('/login')
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消退出'
                });
            });
        }
    },
}
</script>

<style lang="less" scoped>
// 侧边栏菜单的样式
.el-aside {

    .el-submenu,
    .el-menu-item {
        width: 200px;
        user-select: none;
    }
}

// 左侧边栏用户信息区域
.user-box {
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    user-select: none;

    img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background-color: #fff;
        margin-right: 15px;
        object-fit: cover;
    }

    span {
        color: white;
        font-size: 12px;
    }
}

.main-container {
    height: 100%;

    .el-header,
    .el-aside {
        background-color: #23262e;
    }

    .el-header {
        padding: 0;
        display: flex;
        justify-content: space-between;
    }

    .el-main {
        overflow-y: scroll;
        height: 0;
        background-color: #F2F2F2;
    }

    .el-footer {
        background-color: #eee;
        font-size: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.avatar {
    border-radius: 50%;
    width: 35px;
    height: 35px;
    background-color: #fff;
    margin-right: 10px;
    object-fit: cover;
}
</style>
